<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备数据</title>
    <style>
        #body{
            text-align:center;
        }
        #title{
            font-size: 4em;
            color: #64e2ed;
        }
        #button{
            margin-top: 50px;
            width: 100px;
            height: 40px;
            color: #64b2ed;

        }
        .x{                                  /*//设置x组标签样式*/
            display: inline-block;
            width: 260px;
            height: 80px;
            background-color: #6080b8;
            line-height: 80px;
            color: #efe8e8;
        }
        .y{
            display: inline-block;
            width: 260px;
            height: 80px;
            background-color: burlywood;
            line-height: 80px;
            color: #efe8e8;
        }
    </style>
</head>
<body id="body">
       <h1 id="title">身体指数</h1>
       <button id="button"onclick="get()">查看</button><br>
       <h1 class="x">血压</h1><h1 id="temperature" class="y">--</h1><br>
       <h1 class="x">体温</h1><h1 id="pressure" class="y">--</h1><br>
       <h1 class="x">湿度</h1><h1 id="humidity"  class="y">--</h1><br>
       <h1 class="x">x</h1><h1 id="x" class="y">--</h1><br>
       <h1 class="x">y</h1><h1 id="y" class="y">--</h1><br>
       <h1 class="x">z</h1><h1 id="z"  class="y">--</h1><br>

       <script>
           function get() {

               //第一步：获取ajax
               let ajx=new XMLHttpRequest();
               //第二步：设置请求方式和网址
               ajx.open("GET","http://121.41.58.41:9876/sendWeb");
               ajx.onreadystatechange=function () {
                   if(ajx.readyState===4&&ajx.status===200){
                       let tem=document.getElementById("temperature");
                       let pre=document.getElementById("pressure");
                       let hum=document.getElementById("humidity");
                       let x=document.getElementById("x");
                       let y=document.getElementById("y");
                       let z=document.getElementById("z");
                       let array=ajx.responseText.split("-");
                       if(array.length===6){
                           tem.innerHTML=array[0]+"℃";
                           pre.innerText=array[1]+"mmHg";
                           hum.innerText=array[2]+"%";
                           x.innerHTML=array[3];
                           y.innerText=array[4];
                           z.innerText=array[5];
                       }

                   }

               };
               //第四步 提交
               ajx.send();
           }
       </script>
</body>
</html>